<template>
  <div class="channelEdit-vue">
    <van-action-sheet v-model="show" title="频道管理">
      <!-- 我的频道 -->
      <div class="channel-box">
        <div class="title">
          <span>我的频道</span>
          <van-button
            @click="delShow = !delShow"
            plain
            size="mini"
            type="danger"
            >{{ delShow ? "取消" : "编辑" }}</van-button
          >
        </div>
        <van-grid>
          <!-- 当子组件的下标与父组件传来的下标相同时，让该类名生效 -->
          <van-grid-item
            :class="{ active: index == value }"
            v-for="(item, index) in myList"
            :key="item.id"
            @click="myChange(index)"
          >
            {{ item.name }}
            <van-icon
              v-show="delShow && index != 0"
              @click="del(index)"
              class="del-icon"
              name="cross"
            />
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 可选频道 -->
      <div class="channel-box">
        <div class="title">
          <span>可选频道</span>
        </div>
        <van-grid>
          <van-grid-item
            v-for="item in optionalChannels"
            @click="add(item)"
            :key="item.id"
            :text="item.name"
          />
        </van-grid>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { setChannelsAPI } from "@/api/channels";
export default {
  props: {
    // 从父组件拿取用户个人频道
    myList: {
      required: true,
      type: Array,
    },
    allList: {
      required: true,
      type: Array,
    },
    // 从父组件获取高亮下标
    value: {
      required: true,
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      show: false,
      delShow: false,
    };
  },
  methods: {
    // 添加频道
    add(item) {
      this.myList.push(item);
      this.setChange();
    },
    // 删除频道
    del(index) {
      // 解决：删除高亮频道前的频道时，数组前移导致高亮目标错误
      // 方法：让父组件传过来控制高亮的值减1即可
      this.myList.splice(index, 1);
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }
      this.setChange();
    },
    // 点击子组件切换高亮
    myChange(index) {
      this.$emit("input", index);
      this.show = false;
    },
    // 更改频道时，调用函数请求服务器同时更改
    // 数据持久化
    async setChange() {
      // 判断是否登录
      // 登录则请求服务器，否则存储到本地
      if (this.$store.state.tokenObj.token) {
        // 因为我们数组的键与服务器要求不同，因此用map重新生成一个对应数组
        const channels = this.myList.map((v, index) => {
          return {
            id: v.id,
            seq: index,
          };
        });
        await setChannelsAPI({
          // channels: channels,
          channels,
        });
      } else {
        localStorage.setItem("channels", JSON.stringify(this.myList));
      }
    },
  },
  computed: {
    // 计算属性，当依赖的属性的值变化时，该属性以及对应dom都会变化
    optionalChannels() {
      // 返回我的频道中没有的选项
      // 我们就是要筛选-1的项
      // 因此在filter中是筛选条件为true的项
      return this.allList.filter((v) => {
        // 找到返回下标，找不到返回-1
        return this.myList.findIndex((item) => item.id == v.id) == -1;
      });
    },
  },
};
</script>

<style lang='less' scoped>
.channel-box {
  padding: 20px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .del-icon {
    position: absolute;
    top: 3px;
    right: 3px;
  }
}

.active {
  color: red;
}
</style>